<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="userProfiel.photo" @click="imageClickFn" />
          <!-- file 选择框 -->
          <input type="file" ref="iptFile" v-show="false" accept="image/*" @change="onFileChange" />
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="userProfiel.name" @click="editNameFn" />
      <van-cell title="生日" is-link :value="userProfiel.birthday" @click="birthdayFn" />
    </van-cell-group>
    <!-- 编辑用户名称的弹框 -->
    <van-dialog v-model="show" title="标题" show-cancel-button :beforeClose="beforeCloseFn">
      <input type="text" v-fofo v-model="userIptname">
    </van-dialog>
    <!-- popup 弹出层 -->
    <van-popup v-model="datetimePickerShow" position="bottom" :style="{ height: '50%' }">
      <!-- 时间选择弹出层 -->
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @cancel="dateCancelFn" @confirm="dateConfirmFn" />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileApi, updateUserPhoto, updateUserProfileApi } from '@/api'
import Notify from '@/ui/Notify.js'
import { formatDate } from '@/utils/timeFormat'
export default {
  name: 'UserEdit',
  data() {
    return {
      userProfiel: {}, // 用户个人资料对象
      show: false, // 编辑用户名称的弹框的显示与隐藏
      userIptname: '', // 编辑用户信息里文本
      minDate: new Date(1920, 0, 1), // 最小范围
      maxDate: new Date(), // 最大范围
      currentDate: new Date(), // 当前显示时间
      datetimePickerShow: false // 时间选择组件的显示/隐藏
    }
  },
  async created() {
    const res = await getUserProfileApi()
    this.userProfiel = res.data.data
  },
  methods: {
    // 文件选择改变的方法
    async onFileChange(e) {
      if (e.target.files.length === 0) return // 用户没有选择图片 下面逻辑代码不执行
      const theFd = new FormData()
      theFd.append('photo', e.target.files[0])
      const res = await updateUserPhoto(theFd)
      this.userProfiel.photo = res.data.data.photo // 把头像换成服务器返回来的url
      this.$store.commit('SET_PHOTO', res.data.data.photo) // 往vuex中存入头像 别处都可以使用
    },
    // 用户头像的点击事件
    imageClickFn() {
      this.$refs.iptFile.click()
    },
    // 点击编辑名称的回调
    editNameFn() {
      this.show = true // 显示编辑用户的弹出框
      this.userIptname = this.userProfiel.name // 把当前的名称显示到输入框中
    },
    // 名称编辑弹出框关闭前的回调
    async beforeCloseFn(action, done) {
      if (action === 'confirm') { // 点击了确认按钮
        const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,7}$/
        if (reg.test(this.userIptname) === true) { // 校验通过
          // 名称同步更新到后台
          await updateUserProfileApi({
            name: this.userIptname
          })
          this.userProfiel.name = this.userIptname // 更新成功 名称数据回显
          this.$store.commit('SET_NAME', this.userIptname)
          done()
        } else { // 校验失败
          done(false)
          Notify({ type: 'warning', message: '用户名是能是1-7位中英数字组合' })
        }
      } else { // 取消按钮
        // 关闭弹出框
        done()
      }
    },
    // 生日的点击事件
    birthdayFn() {
      this.datetimePickerShow = true // 显示时间选择器
      this.currentDate = new Date(this.userProfiel.birthday)
    },
    // 时间选择器取消事件
    dateCancelFn() {
      this.datetimePickerShow = false // 关闭时间选择器
    },
    // 时间选择器确认事件
    async dateConfirmFn() {
      // 同步数据到后台
      await updateUserProfileApi({
        birthday: formatDate(this.currentDate)
      })
      this.userProfiel.birthday = formatDate(this.currentDate) // 生日数据回显
      this.datetimePickerShow = false // 关闭时间选择器
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
.van-dialog {
  text-align: center;
  input {
    border: none;
    outline: none; //边框外面的轮廓
    text-align: center;
  }
}
</style>
